<template>
    <div
        class="MobilePhone box_card_body"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>查询类 --> 证件号/预留手机号码查询持卡人</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <el-form ref="formData" :rules="rules" :model="formData" label-width="130px">
                    <el-row>
                        <el-col :span="24">
                            <div class="text_center leftWidth30">
                                <el-form-item label="手机号:" class="text_fl" prop="MOPHONE">
                                    <el-input v-model.trim="formData.MOPHONE"></el-input>
                                    <div class="text_center dispy_in_bok margin_left30">
                                        <el-button
                                            type="primary"
                                            size="small"
                                            @click="handleClickbtn"
                                            icon="el-icon-search"
                                        >查询</el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-refresh-right"
                                            @click="handleClickRemove"
                                        >重置</el-button>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <div v-show="IDList.length>0">
                    <el-table :data="IDList" border class="table_head heard-bg setbottomborder">
                        <!-- <el-table-column label="默认进线证件号">
                            <template slot-scope="scope">
                                <el-radio
                                    v-model="CUSTID_value"
                                    @change="handerRadioCardnbr(scope.row)"
                                    :label="scope.row.CUSTID.trim()"
                                >{{''}}</el-radio>
                            </template>
                        </el-table-column>-->
                        <el-table-column label="证件类型">
                            <template slot-scope="scope">
                                <div>{{scope.row.KEYTYPE|filterKetype(certificateTypeList)}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="CUSTID" label="证件号">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="handerRadioCardnbr(scope.row)"
                                >{{scope.row.CUSTID}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 话术 -->
                <div class="hstable_wrap" v-if="speechList.length!=0">
                    <el-table
                        :data="speechList"
                        border
                        stripe
                        header-row-class-name="headerRow"
                        ref="showListTable"
                        class="heard-bg business_table hstable"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                        <el-table-column label="业务话术">
                            <template slot-scope="scope">{{scope.row.content}}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <el-dialog
                v-drag
                title="预留手机号码查询持卡人"
                :visible.sync="centerDialogVisible"
                width="500px"
                :append-to-body="true"
                top="30vh"
                :close-on-click-modal="false"
                center
            >
                <p>
                    证件类型：
                    <span>{{this.KEYTYPE|filterKetype(certificateTypeList)}}</span>
                </p>
                <p>
                    证件号：
                    <span>{{this.CUSTID}}</span>
                </p>

                <p class="text_center padding_top15">
                    <span style="color:#3a8ee6; ">确认要重新打开接待单吗？</span>
                </p>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="centerDialogVisible = false">取 消</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handerdefaultCardInfo"
                        icon="el-icon-circle-check"
                    >确定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
    closePage, getDictSelectList,
} from '@/utils/Common';
export default {
    name: 'MobilePhone',
    data() {
        return {
            formData: {
                MOPHONE: '',
            },
            pageLoading: false,
            centerDialogVisible: false,
            centerDialogVisibleFlag: false,
            rules: {
                MOPHONE: [{ required: true, message: '手机号不能为空！', trigger: 'blur' },
                ],
            },
            BALNCE: '',//账面余额
            CREDITLIMIT: '',
            RTNIND: '',//翻页标志
            IDList: [],//证件列表
            CUSTID_value: '',//选中的卡号
            certificateTypeList: '',//
            CUSTID: '',//
            KEYTYPE: '',//
            last_CUSTID: '',//循环体里 最后的一条数据
            last_KEYTYPE: '',//循环体里 最后的一条数据
            speechList: [],//话术列表
            selectedList: [],
        }
    },
    computed: {
        ...mapGetters([
            'defaultParams',
            'pinFlag',
            'isCurrentMenuInfo',
        ])
    },
    filters: {
        filterKetype: (value, certificateTypeList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < certificateTypeList.length; index++) {
                const element = certificateTypeList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
    },
    async mounted() {
        this.getDicListFun();
        await this.getspeechList();
    },
    methods: {
        // 查字典
        async getDicListFun() {
            // 获取证件类型下拉选择列表
            this.certificateTypeList = await getDictSelectList('IDTYPE', this);
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 3048接待单信息查询3
        async getIdCardInfo() {
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            let paramsval = {
                PINFLAG: this.pinFlag,
                INQFLG: '1',
                MOPHONE: this.formData.MOPHONE,//手机号
                RTNIND: this.RTNIND,//翻页
                KEYTYPE: this.last_KEYTYPE,
                CUSTID: this.last_CUSTID,
            }
            defaultParams.body.appBody = Object.assign(this.defaultParams.body.appBody, paramsval);
            defaultParams.body.appHead.tranCode = '3048';// 修改交易号
            console.log(defaultParams);
            await this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) { // 请求成功
                    const IPInfo = JSON.parse(res.data.jsonRes);
                    console.log('IPInfo_', IPInfo);
                    if (IPInfo.sysHead.rspCd == '000000') { // 交易成功
                        this.IDList.push(...IPInfo.body.appBody.dataList)
                        let RTNIND_val = (IPInfo.body.appBody.RTNIND + '').trim();
                        if (RTNIND_val === '1') {
                            this.RTNIND = RTNIND_val;
                            this.last_KEYTYPE = IPInfo.body.appBody.dataList[IPInfo.body.appBody.COUNT - 1].KEYTYPE;
                            this.last_CUSTID = IPInfo.body.appBody.dataList[IPInfo.body.appBody.COUNT - 1].CUSTID;
                            this.getIdCardInfo();
                        } else {
                            this.pageLoading = false;
                            this.RTNIND = '';
                            this.centerDialogVisibleFlag = true;
                        }

                    } else {
                        this.pageLoading = false;
                        const ErrorMessage = `错误码：${IPInfo.sysHead.rspCd} ` + `错误信息：${IPInfo.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, IPInfo.sysHead.busiName, { customClass: 'error', type: 'error' });
                    }
                }
                this.centerDialogVisible = false; // 关闭弹框
            });
        },
        handleClickbtn() {
            this.IDList = [];
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.pageLoading = true;
                    this.getIdCardInfo();
                }
            });
        },
        // // 接单的信息查询确认
        // handleClickCardInfo() {
        //     this.centerDialogVisible = true;
        // },
        // 接单查询
        handerdefaultCardInfo() {
            const formDatainfo = {
                offlinetablecardnbr: '', // 卡号
                keytype: this.KEYTYPE, // 证件类型
                offlinetablecustid: this.CUSTID, // 证件号
                grantreason: '110', // 授权原因
            };
            console.log('formDatainfo', formDatainfo);

            this.centerDialogVisible = false;
            // 清空vuex 里的数据  不要多删数据
            // 这里的dispatch 是异步操作 可用 commit 改为同步
            this.$store.dispatch('common/delStateAllag');
            // tagsView 里的数据删除
            this.$store.commit('tagsView/DEL_NUM_CACHED_VIEWS_ITEM');
            this.$store.commit('tagsView/DEL_ALL_CACHED_VIEWS_ITEM');
            this.$store.commit('tagsView/DEL_ALL_VISITED_VIEWS');
            this.$store.commit('tagsView/DEL_ALL_CACHED_VIEWS');
            // 重做接单
            this.$store.commit('menu/UPDATA_CARDDATA_FROM', formDatainfo);
            //  修改 isChangeCard的状态 为true 时 要重做接待单
            this.$store.commit('menu/UPDATA_CHANGE_CARD_FLAG', true);
            console.log('数据删除了');
            this.$store.commit('tagsView/DELETE_CACHE_VIEWS', 'businessSystem');
            this.$router.push('/businessSystem/defaultPageItem');
            this.$store.commit('menu/UPDATE_ACTIVE_MENU', true);
        },
        // 选择默认证件号卡号
        handerRadioCardnbr(item) {
            console.log('item', item);
            this.CUSTID_value = item.CUSTID;
            this.CUSTID = item.CUSTID;
            this.KEYTYPE = item.KEYTYPE;
            this.centerDialogVisible = true;
        },
        // 重置 功能
        handleClickRemove() {
            this.formData.MOPHONE = '';
            this.IDList = [];
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    }
}
</script>
<style lang='scss' scoped>
.butclass {
    position: absolute;
    margin-left: 20px;
}
</style>
<style lang='scss'>
.MobilePhone {
    .el-form-item {
        .el-form-item__content {
            .el-input {
                width: unset;
            }
        }
    }
    .margin_20 {
        margin: 20px 0;
    }
}
</style>